const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

let WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV); 
module.exports = {
  mode: 'development', //development开发环境   production生产环境
  entry: './src/app.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'js/app.js'
  },
  resolve: {
    alias: {
      page: path.resolve(__dirname, 'src/pages'),
      component: path.resolve(__dirname, 'src/component'),
      service: path.resolve(__dirname, 'src/service'),
      util: path.resolve(__dirname, 'src/util')
    }
  },
  module: {
    rules: [
      // react(jsx) 语法的处理
      {
        test: /\.jsx$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
      // css 文件的处理
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        })
      },
      // scss 文件的处理
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      // 图片的配置
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: 'resource/[name].[ext]'
          }
        }]
      },
      // 字体的处理
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: 'resource/[name].[ext]'
          }
        }]
      }
    ]
  },
  // 提出公共模块
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  // optimization: {
  //   splitChunks: {
  //     chunks: "all", // 必须三选一： "initial" | "all"(默认就是all) | "async" 
  //     minSize: 0, // 最小尺寸，默认0
  //     minChunks: 1, // 最小 chunk ，默认1
  //     maxAsyncRequests: 1, // 最大异步请求数， 默认1
  //     maxInitialRequests: 1, // 最大初始化请求书，默认1
  //     name: function () {}, // 名称，此选项可接收 function
  //     cacheGroups: { // 这里开始设置缓存的 chunks
  //       priority: 0, // 缓存组优先级
  //       vendor: { // key 为entry中定义的 入口名称
  //         chunks: "async", // 必须三选一： "initial" | "all" | "async"(默认就是异步) 
  //         test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
  //         name: "common", // 要缓存的 分隔出来的 chunk 名称 
  //         minSize: 0,
  //         minChunks: 1,
  //         enforce: true,
  //         maxAsyncRequests: 1, // 最大异步请求数， 默认1
  //         maxInitialRequests: 1, // 最大初始化请求书，默认1
  //         reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
  //       }
  //     }
  //   }
  // },
  plugins: [
    // 处理html文件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      inject: true,
      favicon: './favicon.ico'
    }),
    // 独立css文件
    new ExtractTextPlugin("css/[name].css"), // 括号内是文件生成的路径和名称
  ],
  devServer: {
    port: 8086,
    historyApiFallback: {
      index: 'dist/index.html'
    },
    // 代理到后端的接口上
    proxy : {
      '/manage' : {
          target: 'http://admintest.happymmall.com',
          changeOrigin : true// 求情后台时走上面的路径，而不走localhost
      },
      '/user/logout.do' : {
          target: 'http://admintest.happymmall.com',
          changeOrigin : true
      }
    }
  }
};